<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue';
import { message, Upload, TreeSelect, Card, List, Avatar } from 'ant-design-vue';
import { Page } from '@vben/common-ui';
import { useVbenForm } from '#/adapter/form';
import ImgTextGroup from '#/components/ImgTextGroup';
import { saveFormApi,getSourcesDetail,updateResources } from '#/api/admin/resources';
import { getTreeByCode } from '#/api/portal/category';
import { useRoute } from 'vue-router';
const route = useRoute();

const index: any = computed(() => {
  return route.params?.id ?? -1;
});

const copyFrom = Number(route.query.copyFrom) || -1;



async function onGetResources(id: number) {

   const [data_res] = await Promise.all([
   
     getSourcesDetail(id),
  ]);
  const data  = data_res.data;


  data.post = {
    id: copyFrom!=-1?0:(data.post?.id ?? ''),
    category_id:data.category?.category_id ?? '',
    vechile_category:data.category?.vechile_category ?? '',
    files:data.list
  };

  state.form = data.post;

  SingleFormApi.setValues({ ...state.form });

}





// ------- 表单数据 -------
const state = reactive({
  form: {
    category_id: [],
    vechile_category: [],
    files:[],
  },
  options: {
    productTypes: [],
    resourceTypes: [],
  },
  // 控制封面字段是否显示
  showCover: false,
  fileList: [] as any[], // 用于存储上传的文件列表
});

// ------- 获取下拉选项 -------
async function loadModuleOptions() {
  const productRes = await getTreeByCode({ code: 'product' });
  state.options.productTypes = productRes.data;

  const resourceRes = await getTreeByCode({ code: 'resources' });
  state.options.resourceTypes = resourceRes.data;

}



// ------- useVbenForm -------
const [SingleForm, SingleFormApi] = useVbenForm({
  handleSubmit: onSubmit,
  resetButtonOptions: { show: false },
  labelWidth: 100,
  schema: [
    {
      component: 'TreeSelect',
      fieldName: 'category_id',
      label: '资源分类',
      dependencies: {
        trigger: (values) => {
          state.form.files = values.files;
          state.form.vechile_category = values.vechile_category;
        },
        // 随意一个字段改变时，都会触发
        triggerFields: [
          'files',
          'vechile_category',
          'category_id',
        ],
      },
      componentProps: {
        placeholder: '请输入',
      },
    },
    {
      component: 'TreeSelect',
      fieldName: 'vechile_category',
      label: '产品分类',
    },
    {
      component: 'Upload',
      defaultValue: '',
      fieldName: 'files',
      label: '文件上传',
      componentProps: {
        multiple: true,
        displayMode:'list',
       
      },
      slot: 'upload',
    },

  ],
});

// ------- 提交 -------
async function onSubmit() {
  const { msg } = await updateResources(state.form);
  message.success(msg || '保存成功');
}

/* 初始化 */
onMounted(async () => {
  loadModuleOptions();
  await onGetResources(index.value);
});

</script>

<template>
  <Page>
    <Card title="资源/产品上传">
      <SingleForm>
        <template #vechile_category="slotProps">
          <TreeSelect
            v-bind="slotProps"
            :field-names="{
              value: 'id',
              key: 'id',
              label: 'name',
              children: 'children',
            }"
            :tree-data="state.options.productTypes"
            allow-clear
            :multiple="true"
            placeholder="选择分类"
            style="width: 100%"
            tree-default-expand-all
            tree-node-filter-prop="label"
          />
        </template>

        <template #category_id="slotProps">
          <TreeSelect
            v-bind="slotProps"
            :field-names="{
              value: 'id',
              key: 'id',
              label: 'name',
              children: 'children',
            }"
            :tree-data="state.options.resourceTypes"
            allow-clear
            :multiple="true"
            placeholder="选择分类"
            style="width: 100%"
            tree-default-expand-all
            tree-node-filter-prop="label"
          />
        </template>

        

        
      </SingleForm>
    </Card>
  </Page>
</template>